<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style>
			*{   /*初始化所有标签*/
			margin:0;
			padding:0;
			}
			
				/*width:800px;
				height:300px;
				border:1px solid black;
				margin:auto;
				overflow:hidden;
				*/
			}
			.box{
				width:200px;
				height:200px;
				border: 1px solid red;
				font-size: 36px;
				text-align: center;
				float: right;
				margin-right:10px;
				
				}
				.fu{
					overflow:hidden;
					}
					/* 3.添加after伪元素 */
					.clear::after{    /*在...之后*/}
					content:"";  /*内容为空*/
					display:block;   /*转为块元素*/
					height: 0;
					clear:both;
					visibility:hidden;   /*显示状态：隐藏*/
					}
					/* 4.添加双伪元素 */
					/* .clearfix::before,.clearfix::after{ 
						content:"";
						display:table;
					}
					.clearfix::after{
						clear: both;
					}*/
					
			
		</style>
	</head>
	<body>
		<!--传统的网页布局：标准流（元素的显示模式）+浮动+定位
		网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
		标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置。
		-->
		<!--浮动float:让块级元素一行内显示
		float:left:左浮动，盒子从左往右摆放
		float:right:右浮动，盒子从右往左摆放
		float:none;不浮动，默认值
		1.浮动的元素会脱标（脱离标准）
		清除浮动的方法：
		1.额外标签法：隔墙法
		2.给父盒子添加overflow:hidden;
		3.给父元素添加aftre伪元素
		4.
		-->
		<!--
		快速创建标签 :
		1.直接创建标签：标签名*个数 > tab键
		2.创建带有类名的标签：标签名.类名*个数 > tab键  P.font*10
		3.创建带有类名的div: .类名*个数 > tab键
		
		-->
		
		<div class="clearfix">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
		</div>
		
	</body>
</html>
